<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
angular.module('ngMap').controller('MyCtrl', function() {
  var vm = this;
  vm.allShapes = [
    {name: "polyline", path: [[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]},
    {name: "polygon", paths: [[40.74,-74.18],[40.64,-74.18],[40.84,-74.08],[40.74,-74.18]]},
    {name: "rectangle", bounds: [[40.74,-74.18], [40.78,-74.14]]},
    {name: "circle", center:[40.70,-74.14], radius:4000}
  ];
});
</script>
</head>

<body ng-controller="MyCtrl as vm">
  <ng-map zoom="11" center="[40.74, -74.18]">
     <shape ng-repeat="shape in vm.allShapes"
       name="{{shape.name}}"
       stroke-color="#FF0000"
       stroke-opacity="0.8"
       path="{{shape.path}}"
       paths="{{shape.paths}}"
       bounds="{{shape.bounds}}"
       center="{{shape.center}}"
       radius="{{shape.radius}}"
       stroke-weight="2"></shape>
  </ng-map>
</body>
</html>
